import { ref, onMounted } from "vue";
import {
  GetClockInRecord,
  GetScoreAndRanking,
  IntelligentEvaluationRankingDetail,
  IntelligentEvaluationGetScoreDetail,
} from "@/api/stu/evaluation"
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import qs from 'qs';
import { ElMessage, FormInstance } from "element-plus";
export function useComponent() {
  const mydaylist = ref<any>();
  let ScoreAll = ref<any>({});
  const ModelDetails = ref<boolean>(false);
  const IDtitle = ref<string>("");
  const lDetailsHtml = ref<String>("");
  async function GetClockingRecord() {
    const respone = await GetScoreAndRanking();
    const {
      comprehensiveAbility,
      studyTotal,
      analysisTotal,
      practiceTotal,
      managementTotal,
      applicateTotal,
      exploreTotal,
      totalRanking,
      total,
      detail,
      moudleRanking
    } = respone?.data;
    const Detail = eval('(' + detail + ')');
    const MoudleRanking = eval('(' + moudleRanking + ')');
    BT1(MoudleRanking?.name[0], MoudleRanking?.value[0])
    BT2(MoudleRanking?.name[1], MoudleRanking?.value[1])
    BT3(MoudleRanking?.name[2], MoudleRanking?.value[2])
    BT4(MoudleRanking?.name[3], MoudleRanking?.value[3])
    BT5(MoudleRanking?.name[4], MoudleRanking?.value[4])
    BT6(MoudleRanking?.name[5], MoudleRanking?.value[5])
    BT7(MoudleRanking?.name[6], MoudleRanking?.value[6])
    BT8(MoudleRanking?.name[7], MoudleRanking?.value[7])
    BT9(MoudleRanking?.name[8], MoudleRanking?.value[8])
    // 打卡
    PunshiRecord()
    // 综合得分
    ScoreAll.value = { studyTotal, analysisTotal, practiceTotal, managementTotal, applicateTotal, exploreTotal, total, totalRanking }
    // 综合得分
    SynthesizeAbility(comprehensiveAbility);
    // 得分明细
    ScoreBreakdown(Detail)
  }

  // 打卡
  async function PunshiRecord() {
    let today = new Date();
    let year = today.getFullYear(); // 获取当前年份(4位数字)
    let month = today.getMonth() + 1; // 获取当前月份(0-11,需要加1)
    const Dateres = qs.stringify({ year, month })
    const resRecord = await GetClockInRecord(Dateres);
    mydaylist.value = resRecord.data;
  }
  // 水波球
  function BT1(el: string, row: number) {
    // 图表4_1 (饼图)
    const data4_1 = {
      title: "python",
      value: row,
      color: ["#2D4F85", "transparent", "#a4dbff", "#04baff", "#a7e2ff", "#04baff"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };

    const option4_1 = getOption(data4_1, "#chart4_1");
    option4_1.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: "#2D4F85",
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_1.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };

    var chart4_1 = echarts.init(document.getElementById('chart4_1'));
    chart4_1.setOption(option4_1);
    window.addEventListener('resize', function () {
      chart4_1.resize();
    }, false);
  }
  function BT2(el: string, row: number) {
    // 图表4_2 (饼图)
    const data4_2 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#def8fc", "#48d2b0", "#a6e4dc", "#00bf8b"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    const option4_2 = getOption(data4_2, "#chart4_2");
    const chart4_2 = echarts.init(document.getElementById('chart4_2'));
    option4_2.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: "#2D4F85",
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_2.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_2.setOption(option4_2);
    window.addEventListener('resize', function () {
      chart4_2.resize();
    }, false);
  }
  function BT3(el: string, row: number) {
    // 图表4_3 (饼图)
    const data4_3 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#ffe0b5", "#ffc069", "#f3e4d2", "#ffc06a"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    const option4_3 = getOption(data4_3, "#chart4_3");
    option4_3.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_3.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_3.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    const chart4_3 = echarts.init(document.getElementById('chart4_3'));
    chart4_3.setOption(option4_3);
    window.addEventListener('resize', function () {
      chart4_3.resize();
    }, false);
  }
  function BT4(el: string, row: number) {
    // 图表4_4 (饼图)
    const data4_4 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#dab3ff", "#9018ff", "#cfacff", "#8604ff"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色

    };
    const option4_4 = getOption(data4_4, "#chart4_4");
    const chart4_4 = echarts.init(document.getElementById('chart4_4'));
    option4_4.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_4.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_4.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_4.setOption(option4_4);
    window.addEventListener('resize', function () {
      chart4_4.resize();
    }, false);
  }
  function BT5(el: string, row: number) {
    // 图表4_5 (饼图)
    var data4_5 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#a6b7ff", "#0f3bff", "#a7baff", "#1944ff"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    var option4_5 = getOption(data4_5, "#chart4_5");
    var chart4_5 = echarts.init(document.getElementById('chart4_5'));
    option4_5.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_5.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_5.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_5.setOption(option4_5);
    window.addEventListener('resize', function () {
      chart4_5.resize();
    }, false);
  }
  function BT6(el: string, row: number) {
    // 图表4_6 (饼图)
    var data4_6 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#a1f783", "#4cd81a", "#bbebb8", "#46d613"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    var option4_6 = getOption(data4_6, "#chart4_6");
    var chart4_6 = echarts.init(document.getElementById('chart4_6'));
    option4_6.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_6.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_6.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_6.setOption(option4_6);
    window.addEventListener('resize', function () {
      chart4_6.resize();
    }, false);
  }
  function BT7(el: string, row: number) {
    // 图表4_7 (饼图)
    var data4_7 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#9ef7fd", "#1be7f3", "#abeffb", "#10e5f2"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    var option4_7 = getOption(data4_7, "#chart4_7");
    var chart4_7 = echarts.init(document.getElementById('chart4_7'));
    option4_7.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_7.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_7.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_7.setOption(option4_7);
    window.addEventListener('resize', function () {
      chart4_7.resize();
    }, false);
  }
  function BT8(el: string, row: number) {
    // 图表4_8 (饼图)
    var data4_8 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#ffc4a3", "#ff6009", "#f3c6b3", "#ff5d04"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    var option4_8 = getOption(data4_8, "#chart4_8");
    var chart4_8 = echarts.init(document.getElementById('chart4_8'));
    option4_8.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_8.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_8.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_8.setOption(option4_8);
    window.addEventListener('resize', function () {
      chart4_8.resize();
    }, false);
  }
  function BT9(el: string, row: number) {
    // 图表4_8 (饼图)
    var data4_9 = {
      title: "",
      value: row,
      color: ["#2D4F85", "transparent", "#ffa8db", "#ff4bb6", "#f3bde7", "#fd59bc"],  //0标题颜色,1标题背景,2波浪顶部颜色,3波浪底部颜色,4圆背景渐变色,5外圈圆颜色
    };
    var option4_9 = getOption(data4_9, "#chart4_9");
    var chart4_9 = echarts.init(document.getElementById('chart4_9'));
    option4_9.title = {
      text: el,
      bottom: '10', //设置为适当的值，可以是数字或者字符串
      // bottom: "-10",
      align: "center",
      height: "40",
      left: "center",
      padding: [0, 0, 0, 0],
      itemHeight: 29,
      textStyle: {
        color: data4_9.color[0],
        fontSize: 18,
        fontWeight: "500"
      },
      subtextStyle: {
        color: data4_9.color[0],
        fontSize: 12,
        top: "50"
      },
      itemGap: 50
    };
    chart4_9.setOption(option4_9);
    window.addEventListener('resize', function () {
      chart4_9.resize();
    }, false);
  }
  function getOption(params: { title: any; value: any; color: any; }, el: string) {
    const option = {
      title: {
        text: params.title,
        left: "center",
        bottom: "5%",
        padding: [8, 10],
        textStyle: {
          width: 120,
          overflow: "truncate",
          fontSize: 10,
          fontWeight: "lighter",
          color: params.color[0]
        },
        backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: colorRgba(params.color[1], 0) },
          { offset: 0.4, color: colorRgba(params.color[1], 0.3) },
          { offset: 0.6, color: colorRgba(params.color[1], 0.3) },
          { offset: 1, color: colorRgba(params.color[1], 0) },
        ])
      },
      series: [
        {
          type: 'liquidFill',
          center: ['50%', '40%'],
          radius: '45%',
          showEmptyCircle: false,
          emptyCircleStyle: {
            color: "rgba(238, 28, 28, 1)"
          },
          emphasis: {
            scale: false
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: params.color[2],
                },
                {
                  offset: 1,
                  color: params.color[3],
                },
              ])
            }
          },
          label: {
            normal: {
              formatter: function (e: any) {
                return params.value + "%";
              },
              textStyle: {
                color: '#335FA6',
                insideColor: 'yellow',
                fontSize: 14,
                padding: [0, 0, 30, 0]
              }
            }
          },
          backgroundStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.6)',
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.6,
              colorStops: [{
                offset: 0, color: colorRgba(params.color[4], 0) // 0% 处的颜色
              }, {
                offset: 1, color: colorRgba(params.color[4], 0.6) // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [{
            value: params.value / 100, // 圈内水波纹
            amplitude: 5,
          }, {
            value: params.value / 100,// 圈内水波纹
            amplitude: 5,
          }],

          amplitude: 10,
          outline: {
            show: false
          }
        },
        {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['53%', "55%"],
          emptyCircleStyle: {
            color: colorRgba(params.color[5], 0.1),
            borderWidth: 5,
            borderColor: colorRgba(params.color[5], 0.5)
          },
        }, {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['50%', "58%"],
          startAngle: 340, // 外圈起始位置
          clockwise: false,
          data: [params.value / 100, 1 - params.value / 100],// 外圈
          color: [colorRgba(params.color[5], 1), colorRgba(params.color[5], 0)],
          emptyCircleStyle: {
            color: "rgba(238, 28, 28, 0.01)",
            borderType: "dashed",
            borderWidth: 1,
            borderColor: "#297af7"
          },
          itemStyle: {
            borderRadius: 10,
          },
          z: 5,
          labelLine: {
            show: false
          },
          emphasis: {
            scale: false
          }
        }]
    }
    return option;
  }

  function colorRgba(str: string, alpha: string | number) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = str.toLowerCase();
    if (sColor == 'transparent') {
      return 'transparent'
    }
    if (sColor && reg.test(sColor)) {
      if (sColor.length === 4) {
        var sColorNew = "#";
        for (let i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
        }
        sColor = sColorNew;
      }
      //处理六位的颜色值
      var sColorChange = [];
      for (let i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
      }
      return "rgba(" + sColorChange.join(",") + ',' + alpha + ")";
    } else {
      return sColor;
    }
  }
  // 水波球 end

  // 综合能力图
  function SynthesizeAbility(data1: string) {
    let datas = eval(data1)
    var cols = ["#ee081585", "#ff95288a"]
    var option1 = {
      color: cols,
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: "center",
        bottom: "5%",
        itemStyle: {
          opacity: 1
        }
      },
      radar: {
        center: ['50%', '40%'],
        radius: "50%",
        startAngle: 60,
        axisName: {
          lineHeight: 32,
          padding: [0, 20],
          color: "#333333",
          // backgroundColor: {
          //   image: "src/assets/studen/images/e-a1-bg1.png"
          // }
        },
        indicator: [
          { name: '学习能力', max: 100 },
          { name: '分析能力', max: 100 },
          { name: '实践能力', max: 100 },
          { name: '应用能力', max: 100 },
          { name: '风控能力', max: 100 },
          { name: '探索能力', max: 100 }
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          areaStyle: {},
          data: datas
        }
      ]
    };
    var chart1 = echarts.init(document.getElementById('chart1'));
    chart1.setOption(option1);
    window.addEventListener('resize', function () {
      chart1.resize();
    }, false);

  }

  // 得分明细
  function ScoreBreakdown(row) {
    const myChart = echarts.init(document.getElementById('ScoreBreakdown'));
    myChart.on('click', function (params) {
      ScoreDreakdown(params)
    })
    const dataAxis = row.name;
    const data = row.value;
    const option = {
      title: {
        show: false
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: false,
          color: '#333',
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 4;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999'
        }
      },
      series: [
        {
          type: 'bar',
          label: {
            show: true,
            position: "top"
          },
          itemStyle: {
            barBorderRadius: [5, 5, 5, 5],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#D9D3F5' },
              { offset: 0.2, color: '#694ED6' },
              { offset: 0, color: '#694ED6' }
            ])
          },
          barWidth: 20,
          data: data
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 班级模块排名--查看详情
  async function ShowDetails(row) {
    let title = ""
    switch (row) {
      case 1:
        title = "python与大数据"
        break;
      case 2:
        title = "大数据应用案例"
        break;
      case 3:
        title = "大数据处理"
        break;
      case 4:
        title = "银行大数据"
        break;
      case 5:
        title = "保险大数据"
        break;
      case 6:
        title = "证券大数据"
        break;
      case 7:
        title = "大数据供应链金融"
        break;
      case 8:
        title = "征信大数据"
        break;
      case 9:
        title = "大数据金融监管"
        break;
    }
    const data = qs.stringify({ type: title })
    const res = await IntelligentEvaluationRankingDetail(data);
    if (res.success) {
      IDtitle.value = "成绩查询"
      ModelDetails.value = true;
      lDetailsHtml.value = res?.data?.m_StringValue;
    } else {
      ElMessage.error(res.msg)
    }
  }
  // 得分明细 --查看得分明细
  async function ScoreDreakdown(row) {
    const data = qs.stringify({ type: row.name })
    const res = await IntelligentEvaluationGetScoreDetail(data);
    if (res.success) {
      IDtitle.value = "答案查询"
      ModelDetails.value = true
      lDetailsHtml.value = res?.data;
    } else {
      ElMessage.error(res.msg)
    }
  }

  onMounted(() => {
    GetClockingRecord()
  })

  return {
    IDtitle,
    ScoreAll,
    mydaylist,
    ModelDetails,
    lDetailsHtml,
    ShowDetails
  }
}
